<html>
<head>
    <title>uxebu xray</title>
    
    <link id="themeStyles" rel="stylesheet" href="js/dijit/themes/tundra/tundra.css">
	<style type="text/css">
        @import "js/dojo/resources/dojo.css";
		@import "js/dojox/grid/resources/Grid.css";
		
		@import "js/xray/resources/Updater.css";
		
		@import "js/xray/tools/resources/Transport.css";
		@import "js/xray/tools/resources/DropTarget.css";
		@import "js/xray/tools/resources/RecordingStats.css";
    </style>

	<style type="text/css">
		@import "css/layout.css";
		@import "css/xrayGrid.css";
	</style>

    <script type="text/javascript" src="js/dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true, gfxRenderer:'canvas'"></script>
	
	<script type="text/javascript" src="js/AIRAliases.js"></script>
	<script type="text/javascript" src="js/AIRIntrospector.js"></script>
	
    <script type="text/javascript" src="js/bootstrap.js"></script>

	<script src="lib/library.swf" type="application/x-shockwave-flash"></script>
</head>
<body class="tundra">
	<div id="container">
		<div id="overlay" style="display: none"><div id="loadingIcon"></div></div>
		<div id="header">
			<div id="headerLeft"></div>
			<div id="headerCenter">
				<img src="images/logo.png" id="logo" />
				<img src="images/profiling.png" id="teaser" />
				<div id="appStatus">
					<img id="appMinimize" src="images/appMinimize.png" />
					<img id="appClose" src="images/appClose.png" />
				</div>
			</div>
			<div id="headerRight"></div>
		</div>
		<div id="contentContainer">
			<div id="contentContainerLeft"></div>
			<div id="contentCenter">
				<div id="content">
					<div dojoType="dijit.layout.BorderContainer" style="height: 100%; width: 100%; padding: 0px !important; margin: 0px !important; background: none !important" title="Chart">
						<div dojoType="dijit.layout.TabContainer" id="mainTabs" region="center">
							<div dojoType="dijit.layout.BorderContainer" id="chartBC" title="Chart">
								<div dojoType="dijit.layout.ContentPane" region="top" style="height: 50px; overflow: hidden;">
									<div class="borderContentContainer toolsContainer">
										<div class="top">
											<div class="left"></div>
											<div class="center"></div>
											<div class="right"></div>
										</div>
										<div class="center">
											<div class="left"></div>
											<div class="center">
												<div id="loadingTools" class="loading">
												</div>
												<div id="tools">
													<table class="toolsTable">
														<tr class="toolsInfo">
															<td>Session controls</td>
															<td>Memory usage</td>
															<td>CPU usage</td>
															<td class="tdDND" rowspan="2"><div dojoType="xray.tools.DropTarget"></div></td>
															<td class="tdClient" rowspan="2"><div dojoType="xray.tools.Client"></div></td>
														</tr>
														<tr>
															<td class="tdSessionControls">
																<span dojoType="xray.tools.Transport"></span>
																&nbsp;&nbsp;&nbsp; 
																<img id="saveSession" src="images/iconSave.png" />
																<div dojoType="xray.tools.Screenshot"></div>
															</td>
															<td class="tdMemUsage"><span id="memUsageValue"></span> MB</td>
															<td class="tdCpuUsage"><span id="cpuUsageValue"></span> %</td>
														</tr>
													</table>
												</div>
											</div>
											<div class="right"></div>
										</div>
										<div class="bottom">
											<div class="left"></div>
											<div class="center"></div>
											<div class="right"></div>
										</div>
									</div>
								</div>
								<div dojoType="dijit.layout.ContentPane" region="center">
									<div class="borderContentContainer graphContainer">
										<div class="top">
											<div class="left"></div>
											<div class="center"></div>
											<div class="right"></div>
										</div>
										<div class="center">
											<div class="left"></div>
											<div class="center">
												<div id="loadingGraph" class="loading">
													<div class="loadingIcon"></div>
													<div id="loadingMessage"></div>
												</div>
												<div id="mainGraphContent"></div>
											</div>
											<div class="right"></div>
										</div>
										<div class="bottom">
											<div class="left"></div>
											<div class="center"></div>
											<div class="right"></div>
										</div>
									</div>
								</div>
								<div dojoType="dijit.layout.BorderContainer" id="toolsBC" region="bottom" style="margin: 0px !important; padding: 0px !important; height: 300px;">
									<div dojoType="dijit.layout.ContentPane" region="top" style="height: 50px; overflow: hidden;">
										<div class="borderContentContainer smallGraphContainer">
											<div class="top">
												<div class="left"></div>
												<div class="center"></div>
												<div class="right"></div>
											</div>
											<div class="center">
												<div class="left"></div>
												<div class="center">
													<div id="loadingSmallGraph" class="loading">
													</div>
													<div id="smallGraphContent"></div>
												</div>
												<div class="right"></div>
											</div>
											<div class="bottom">
												<div class="left"></div>
												<div class="center"></div>
												<div class="right"></div>
											</div>
										</div>
									</div>
									<div dojoType="dijit.layout.ContentPane" region="center" style="overflow: hidden;">
										<div class="borderContentContainer activityGrid">
											<div class="top">
												<div class="left"></div>
												<div class="center"></div>
												<div class="right"></div>
											</div>
											<div class="center">
												<div class="left"></div>
												<div class="center">
													<div id="loadingActivity" class="loading">
														<div class="loadingIcon"></div>
													</div>
													<div id="activityGrid"></div>
												</div>
												<div class="right"></div>
											</div>
											<div class="bottom">
												<div class="left"></div>
												<div class="center"></div>
												<div class="right"></div>
											</div>
										</div>
									</div>
								</div>			
							</div>
							<div dojoType="dijit.layout.BorderContainer" title="Analysis" id="analysisBC">
							    <div dojoType="dijit.layout.ContentPane"><div dojoType="xray.tools.Timer" id="xrayTimer"></div></div>	
							</div>
						</div>	
						<div dojoType="dijit.layout.TabContainer" id="statusTabs" style="width: 25%" region="right">
							<div dojoType="dijit.layout.ContentPane" title="Info">
								<div dojoType="xray.tools.RecordingStats"></div>
							</div>
							<div dojoType="dijit.layout.ContentPane" title="Stacktrace">
								
							</div>
						</div>
					</div>
				</div>
				<!--
				<div id="contentExtra">
					<div dojoType="dijit.layout.TabContainer" tabPosition="bottom" id="extraTabs">
						<div id="eventGrid" dojoType="dijit.layout.ContentPane" title="Data">
							<table id="eventGridData">

							</table>
						</div>
						<div id="eventTools" dojoType="dijit.layout.ContentPane" title="Record">
							<div id="record"><img src="images/record.png" id="recordStats"> <input type="text" id="recordValue" /></div>
						</div>
					</div>		
				</div>-->
	    	</div>
			<div id="contentContainerRight"></div>
			<div class="clearfix"></div>
		</div>
		<div id="footer">
			<div id="footerLeft"></div>
			<div id="footerCenter"><img src="images/uxebu.png" /></div>
			<div id="footerRight"></div>
		</div>
	</div>
</body>
</html>
